@bar-length: 128;
@bar-deg: 2.8125deg;

body {
    background: #000;
    overflow: hidden;
}

@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lilitaone/v13/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.title {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 50vh;
    transform: translate(0px, calc(-50% + 40px));

    &::before {
        content: 'MUSIC DJ';
        text-shadow: -2px 0px 2px #000,
            -2px 0px 20px #ffffff94,
            2px 0px 40px #ffffff94,
            0px 2px 40px #ffffff94,
            0px -2px 40px #ffffff94;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
    }


    &,
    &::before {
        font-size: 42px;
        color: #fff;
        text-align: center;
        font-family: Lilita One;
    }
}
#HI {
    transform: translate(0px, calc(-50% - 40px));
    &::before {
        content: 'HI'
    }
}

ul {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: -1;
    // transform: rotate(90deg)
}

li {
    position: absolute;
    margin: auto;
    height: 28px;
}

each(range(@bar-length), {
        li:nth-of-type(@{value}) {
            transform:rotate((@value * @bar-deg)); // 旋转角度
            left: (50vw + sin((2 * pi() / 360) * @bar-deg)); // 圆切点坐标
            top: (50vh + cos((2 * pi() / 360) * @bar-deg));

            &>div {
                width: 2px;
                height: 4px;
                min-height: 4px;
                max-height: 30px;
                position: absolute;
                left: 0px;
                top: 64px;
                bottom: 0;
                margin: auto;
                transform: translateY(100px);
                background: if((@value >(@bar-length/2)), #6fe9a6, #6eeff9);

                &>div {
                    position: absolute;
                    left: 0px;
                    // top: 64px;
                    bottom: 0;
                    margin: auto;
                    width: 4px;
                    height: 3px;
                    max-height: 30px;
                    // box-shadow: 3px 0px 4px if((@value >(@bar-length/2)), #6fe9a6d1, #6ef0f9b3);
                    // background-color: rgba(255, 0, 255, 0) // z-index: -1;
                }
            }

        }
    }

);